<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
					body {
						height: 100%;
						margin: 0px;
						padding: 0px;
					}
					.mui-bar{
						background: #FE635F;
					}
					
				.mui-titles{
					position: relative;
					float: right;
				}
				.mui-content{
					position: relative;
					float: left;
					width: 100%;
					padding: 10px  0px;
					display: inline-block;
					background: #FFFFFF;
				}		
				.biaoti{
					position: relative;
					float: left;
					width: calc(100% - 44px);
					height: 100%;
					display: flex;
					justify-content: space-around;
					padding-top: 5px;
					box-sizing: border-box;
				}
				
				.biaoti>div{
					width: 64px;
					height: 35px;
					font-size:15px;
		            font-weight:bold;
		            color:rgba(255,255,255,1);
					line-height: 35px;
				
					box-sizing: border-box;
				}
			.tiactive{
					border-bottom: 2px  solid #FFFFFF;
			}
				
				.mui-bar-nav>img:nth-child(1){
					position: relative;
					float: left;
					width: 20px;
					height: 27px;
					margin-top: 10px;
				}
				.mynews{
					position: absolute;
					width: 22px;
					height: 100%;
					right: 15px;
					z-index: 10;
				}
				.mynews>img:nth-child(1){
					width: 22px;
					height: 22px;
					margin-top: 10px;
				}
				.mynews>img:nth-child(2){
						width: 7px;
						height: 7px;
						position: absolute;
						top: 10px;
						right: 0px;
				}
					
				a{
					color:#FFFFFF;
				}
				a:active{
						color:#FFFFFF;
				}
					.leftnews,.rightnews{
					position: relative;
				    width: 100%;
					float: left;
					margin-top: 15px;
					padding: 0  15px;
					box-sizing: border-box;
				}
			   .headphoto{
					position: relative;
					float: left;
					width: 44px;
					height: 100%;
					
				}
				
				.headphoto>img{
					width: 44px;
					height: 44px;
					border-radius: 50%;
					}
				
				.pingluns{
							position: relative;
							float: left;
							width: calc(100% - 54px);
							height: 100%;
							padding-left: 10px;
							box-sizing: border-box;
						    padding-bottom: 15px;
							box-sizing: border-box;
						}
				.pingluns>div:nth-child(1){
					width: 100%;
					height: 22px;
					line-height: 22px;
					font-size:15px;
				    font-weight:500;
				   color:rgba(51,51,51,1)
				    line-height:22px;
					text-align: left;
				}
					.neirong{
						width: 100%;
						line-height: 22px;
						font-size:14px;
						font-weight:500;
						color:rgba(51,51,51,1);
						line-height:22px;
						background:rgba(255,255,255,1);
				        border-radius:10px;
						padding: 5px  0px;
						box-sizing: border-box;
					}
					.hudate{
						width: 100%;
					height: 22px;
					
					}
					.hudate>div:nth-child(1){
						position: relative;
						float: left;
						width: 80px;
						line-height: 22px;
						font-size:11px;
						font-weight:500;
						color:rgba(153,153,153,1);
						line-height:22px;
						text-align: left;
					}
				.talking{
					position: relative;
					float: left;
					width: 100%;
					padding: 10px;
					 box-sizing: border-box;
					border-bottom: 1px solid rgba(235,235,235,1);
				}	
					
				.imgs{
					width:100%;
					position: relative;
				}	
				.imgs>img{
					position: relative;
					float: left;
					width: calc((100% - 15px)/3);
					height: 90px;
					margin-left: 5px;
					margin-top: 5px;
				}
				.zans{
					position: relative;
					float: right;
					width:calc(100% -  80px  -10px);
		            height: 22px;
				}
				
				.zans>div{
					position: relative;
					float: right;
					width: 80px;
					height: 22px;
				}
				.zans>div>img{
				position: relative;
				float: left;	
				width:22px;
				height:22px;
				}
			
						
				.zans>div>span{
					position: relative;
					float: left;
					width: calc(100% -  22px);
					height: 22px;
					line-height: 22px;
					text-align: right;
					padding-right:10px;
					box-sizing: border-box;
					font-size:13px;
		            font-weight:500;
		            color:rgba(151,151,151,1);
				}
				
				.myactivation{
					position: fixed;
					width: 65px;
					height:65px;
					right: 15px;
					bottom: 230px;
					z-index: 10;
				}
				
				.myactivation>img{
					width: 65px;
					height: 65px;
				}
				
				.talkabout{
					position: relative;
					float: left;
					width: 100%;
					padding-bottom: 50px;
					box-sizing: border-box;
					padding: 0  15px;
					
			
					
				}
				.comments {
					
					
					padding: 0px;
					box-sizing: border-box;
				}
				
				.titles{
					position: relative;
					float: left;
					width: 100%;
					height: 50px;
					line-height: 50px;
					font-size:16px;
		             font-weight:500;
		             color:rgba(51,51,51,1);
		             line-height:50px;
					}
		
					.shirink{
						position: relative;
						float: left;
						width: 100%;
					}
					.shirink>div{
						position: relative;
						float: left;
						width: 86px;
						font-size:14px;
		                 font-weight:500;
		                 color:rgba(57,108,165,1);
		                 line-height:24px;
					}
					.shirink>img{
						position: relative;
						float: left;
						width: 9px;
			     		height: 6px;
					    margin-top: 8px;
						margin-left: 5px;
					}
				
					.mui-title{
						color: #FFFFFF;
					}
					
					.comentsleft{
						position: relative;
						float: left;
						width:calc(100% - 90px);
							
					}
					.leftnews{
							border-bottom: 1px solid  rgba(235,235,235,1);
					}
					.comentsright{
						position: relative;
						float: left;
						width: 80px;
						margin-left: 10px;
						}
				.comentsright>img{
					width: 80px;
					height: 80px;
				}		
						
		</style>
	</head>

	<body contextmenu="return false;">
   <header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1  class="mui-title">消息列表</h1>
   </header>		
   

		<div class="mui-content"  id="content">
		<div id='msg-list'>
				<div class="talkabout">
					
					
			<!-- <div class="comments leftnews">
				<div  class="comentsleft">
				<div  class="headphoto"><img src="../image/touxiang.png" /></div>
				<div class="pingluns">
					<div  class="namess">李四</div>
					<div class="hudate">
						<div>20分钟前</div>
					</div>
					<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界.</div>
				</div>
				</div>
				<div class="comentsright">
					<img  src="../image/drug.png" />
				</div>
			</div> -->
			
					<!-- <div class="comments leftnews">
				<div  class="comentsleft">
				<div  class="headphoto"><img src="../image/touxiang.png" /></div>
				<div class="pingluns">
					<div  class="namess">李四</div>
					<div class="hudate">
						<div>20分钟前</div>
					</div>
					<div class="neirong">音乐让人痴迷的点，就是它的内容，它的情感，它的境界.</div>
				</div>
				</div>
				<div class="comentsright">
					<img  src="../image/drug.png" />
				</div>
			</div> -->
			
			
			
		</div>
			</div>
			
			
		</div>
	</body>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" charset="utf-8">
		  mui.init({
		  	beforeback: function() {　　　　
		  	var list = plus.webview.currentWebview().opener();　　　　
		  		  //refresh是A页面自定义事件
		  	mui.fire(list, 'xinduw');
		  		 //返回true,继续页面关闭逻辑
		  	return true;
		  	},
		  });
		  mui.plusReady(function(){
			  var url = plus.storage.getItem('url');
			  var user = plus.storage.getItem('user');
			  user = JSON.parse(user);
			  mui.post(url+'/juyou/Jiaoyou/getweidu',{token:user.token},function(res){
				  if(res.code==200){
					  var str = '';
					  mui.each(res.data.pinglun,function(i,v){
						  str+='<div class="comments leftnews" data-id="'+v.dongtai.id+'">'+
									'<div  class="comentsleft">'+
									'<div  class="headphoto"><img src="'+v.user.touxiang+'" /></div>'+
									'<div class="pingluns">'+
										'<div  class="namess">'+v.user.name+'</div>'+
										'<div class="hudate">'+
											'<div>'+v.create_time+'</div>'+
										'</div>'+
										'<div class="neirong">'+v.pinglun+'</div>'+
									'</div>'+
									'</div>'+
									'<div class="comentsright">';
									if(v.dongtai.type=='图片动态'){
										str+='<img  src="'+v.dongtai.tupian+'" />';
									}else{
										str+='<video controls="controls"  poster="../image/poster-1.png" ><source src="'+v.dongtai.videos+'" /></video>';
									}
									str+='</div>'+
								'</div>';
					  })
					  mui.each(res.data.huifu,function(i,v){
						  str+='<div class="comments leftnews" data-id="'+v.dongtai.id+'">'+
									'<div  class="comentsleft">'+
									'<div  class="headphoto"><img src="'+v.forms.touxiang+'" /></div>'+
									'<div class="pingluns">'+
										'<div  class="namess">'+v.forms.name+'</div>'+
										'<div class="hudate">'+
											'<div>'+v.create_time+'</div>'+
										'</div>'+
										'<div class="neirong">'+v.neirong+'</div>'+
									'</div>'+
									'</div>'+
									'<div class="comentsright">';
										if(v.dongtai.type=='图片动态'){
											str+='<img  src="'+v.dongtai.tupian+'" />';
										}else{
											str+='<video controls="controls"  poster="../image/poster-1.png" ><source src="'+v.dongtai.videos+'" /></video>';
										}
									str+='</div>'+
								'</div>';
					  })
					  $(".talkabout").append(str)
				  }else{
					  mui.toast(res.msg);
				  }
			  })
			  //点击消息
			   mui("#msg-list").on("tap",".leftnews",function(){
			  			  var  name =$(this).attr('data-id');
						  // mui.alert(name)
			  			mui.openWindow({
			  				url:'hujiaoyoutalk.html',
			  				id:"hujiaoyoutalk.html",
			  				extras: {
			  				   pinglun:name,
			  				},
			  				show: {
			  					autoShow: true, //页面loaded事件发生后自动显示，默认为true
			  					aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
			  					duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
			  				},
			  				waiting: {
			  					autoShow: true, //自动显示等待框，默认为true
			  					title: '正在加载...', //等待对话框上显示的提示内容
			  				}
			  			})  
			   })
		  })
		
			  
	  

		 
		 
		 
		 
		 

		</script>


</html>
